Portfolio project guide for creating hi-fi prototypes 建立高保真原型的作品集專案指南
準備工作階段 Prepare to Work on Your Mockups
1.1 建立頁面與畫板（Create a Page and Frames in Figma）
在Figma中建立一個新頁面用於高保真設計，併為每個螢幕建立獨立畫板：
- 為頁面命名,便於日後查詢；
- 每個畫板（Frame）代表一個頁面；
- 參考先前的線框圖（Wireframe），按原位置擺放文字、圖片與按鈕。
小提示：這種重複性操作可安排在精力不足時完成，釋放更大腦力給創意任務。
1.2 建立貼紙板（Sticker Sheet）或設計元件庫
如果還沒建立貼紙板，可以先新建一個Figma頁面，將重複使用的設計元素（如顏色、字型、按鈕、圖示）儲存為"元件"（Component）：
- 使用 Create Component 功能儲存元件；
- 可共享給協作者使用，統一風格；
- 更改元件後可自動更新全部引用例項。
貼紙板也可作為產品"設計系統"（Design System）的一部分，定義可複用規範與風格。
1.3 新增布局網格（Add Grids）
佈局網格幫助你統一排版、對齊元素：
- 建立 layout grid 提高設計效率；
- 使用 Figma 的 Auto Layout 實現元素自適應；
- 排版精準建議：初期可用佔位符，後期再精細調整。
教程：
https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout
https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/
1.4 回顧前期設計資料
建立Mockup前，請回顧以下設計基礎資料：
- 商業需求（Business Requirements）；
- 使用者畫像與問題陳述（User Personas & Problem Statements）；
- 可用性測試結果（Usability Study Results）。
小提示：避免"傳話遊戲"式設計失真，定期回顧最初目標與使用者需求。
構建高保真Mockup Build Your Mockups
2.1 新增字型排版（Typography）
字型是引導使用者視覺焦點與表達品牌的重要工具：
- 明確的層級結構（Hierarchy）可提升可讀性；
- 設定文字樣式（Text Styles）以便重複使用；
- 示例：Logo使用醒目的襯線體，正文使用易讀的無襯線體。
https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles
2.2 新增顏色（Color）
使用60-30-10法則定義色彩搭配：
- 60%為中性色；
- 30%為輔助色；
- 10%為強調色（如按鈕、提醒）；
小提示：規則可靈活調整，只要符合使用者體驗與品牌調性即可。
2.3 新增按鈕與圖示（Buttons and Icons）
按鈕和圖示是"可互動性提示"（Affordances）：
- 決定它們的用途與位置；
- 使用標準圖示（推薦使用Material Design外掛）；
- 若自定義圖示，請考慮多元文化與無障礙性（新增alt文字）；https://www.figma.com/community/plugin/740272380439725040/material-design-icons
2.4 建立視覺分隔（Containment）
四種常用視覺邊界：
- 分割線（Dividers）；
- 邊框（Borders）；
- 填充色（Fill）；
- 陰影（Shadow）；
設計時應與整體配色、風格一致，使介面整潔、結構清晰。
https://help.figma.com/hc/en-us/articles/360041488473-Apply-effects-to-layers
https://help.figma.com/hc/en-us/articles/360041003694-Guide-to-fills
https://help.figma.com/hc/en-us/articles/360049283914-Apply-and-adjust-stroke-properties
2.5 調整留白（Negative Space）
合理的間距提升可讀性和視覺焦點：
- 行間距（Line Spacing）；
- 內邊距（Padding）；
- 外邊距（Margins）；
精修與完善階段 Refine Hi-Fi Mockups
3.1 應用視覺設計原則（Visual Design Principles）
- 強調（Emphasis）：突出重點；
- 層級（Hierarchy）：重要內容優先呈現；
- 比例（Scale and Proportion）：元素之間協調平衡；
- 統一與變化（Unity and Variety）：風格統一又有亮點。
3.2 運用格式塔原理（Gestalt Principles）
- 相似性（Similarity）：相似元素被歸為一類；
- 接近性（Proximity）：靠近的元素被視為相關；
- 共同區域（Common Region）：同一區域內的元素被視為一組；
- 閉合性（Closure）：大腦自動補全圖形；
- 連續性（Continuity）：線性排列產生關聯；
- 對稱/非對稱（Symmetry/Asymmetry）：平衡或強調效果。
3.3 規劃手勢與動效（Gestures and Motion）
- 手勢如滑動、點選、拖拽；
- 動效幫助講故事並聚焦注意力；
- iOS參考HIG標準，Android參考Material Design；
- 測試不同平臺以確保相容性。
3.4 新增導航選單（Navigation Menus）
根據使用者需求選擇合適的導航方式：
- 導航欄（Navigation Bar）：常用於桌面端；
- 標籤欄（Tab Bar）：清晰顯示當前頁面；
- 隱藏選單（Hamburger Menu）：常用於移動端；
- 導航首頁（Navigation Hub）：適用於頁面較少的簡單產品。
建立高保真原型 Create a High-Fidelity Prototype
4.1 連線原型頁面（Connect Screens）
- 按導航順序排列模型，確保螢幕按邏輯順序支援使用者旅程。
- 建立互動，在Figma原型面板中連線螢幕，從觸發器拖動到目標頁面。
- 選擇動畫，在互動詳情面板中嘗試不同動畫型別，使原型更真實。
- 預覽互動，使用右上角的演示按鈕驗證導航是否清晰流暢。
- 儲存並分享原型，點選分享原型，設定訪問許可權為"任何擁有連結的人可以檢視"，複製連結分享。
https://help.figma.com/hc/en-us/articles/360040315773-Connect-your-prototype
4.2 預覽與分享（Preview and Share）
- 使用Present按鈕預覽互動；
- 命名原型，設定為"任何人可檢視"，複製分享連結；
- 使用"Share Prototype"進行交付。
小提示：完成原型後，別忘了慶祝成果！反思與休息也是設計流程的重要組成部分。
最終檢查清單 A Final Checklist
在進入下一輪使用者測試前，請確保已完成以下內容：
- 所有頁面的高保真Mockup已建立；
- 包含字型、顏色、圖示、按鈕、分隔等基本元素；
- 應用了視覺設計與格式塔原則；
- 補充了導航功能與互動設定；
- 頁面連線邏輯清晰、互動順暢；
- 新增了動效，模擬真實使用體驗；
- 儲存了原型並準備用於作品集或面試材料。